<docs>
  ## bar主页按钮
</docs>
<template>
<div>
    <div class="bar" id="bar" v-show="visibleAll">
    <div tag="div" class="item" @click="gotoprev">
      <i class="iconfont icon-reset"></i>
    </div>
  </div>
    <div class="bar" id="bars" v-show="visibleAll">
     <div tag="div" class="item" @click="gotohome">
      <i class="iconfont icon-com_home"></i>
    </div>
  </div>
</div>
  
</template>
<script>
export default {
  name: "bar",
  data() {
    return {
      visibleAll: "",
      istrue: ""
    };
  },
  watch: {
    $route: {
      handler: function(r) {
        if (
          r.name == "position" ||
          r.name == "cv" ||
          r.name == "user" ||
          r.name == "tdlist" ||
          r.name == "gwlist"
        ) {
          this.visibleAll = false;
        } else {
          this.visibleAll = true;
        }
        if (r.name == "cvitae") {
          this.istrue = 1;
        } else {
          this.istrue = "";
        }
      }
    }
  },
  methods: {
    gotoprev() {
      if (this.istrue) {
        this.$router.push({ path: "/user" });
      } else {
        this.$router.back(-1);
      }
    },
    gotohome(){
       this.$router.push({ path: "/position" });
    }
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
$padHelp: $padding-base / 3;
#bars{
   position: fixed;
  bottom: 150px;
  right: 30px;
  color: $color-base;
  z-index: 6;
}
.bar {
  position: fixed;
  bottom: 250px;
  right: 30px;
  color: $color-base;
  z-index: 6;
  .iconfont {
    font-size: $font-size-ultra * 3/4;
    display: block;
    height: 60px;
    width: 60px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 50%;
    position: relative;
    // box-shadow: $color-base 0 0 1px;
  }
  .iconfont:before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .icon-info:before {
    transform: translate(-50%, -47%);
  }
  .item {
    display: block;
    padding: $padding-base / 2;
    border: $padHelp solid #fff;
    background: transparent;
    border-radius: 50%;
    box-shadow: $color-base 0 1px 6px;
    // text-shadow:  $color-base 0 2px 10px;
  }
  .item,
  .item .iconfont {
    transition: $transition;
  }
  .item:active {
    border-color: $color-base;
    .iconfont {
      background-color: $color-base;
      color: #fff;
    }
  }
}
</style>
